<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>采购明细页面</title>
<link rel="stylesheet" href="../../../layui/css/layui.css" media="all">
</head>
<body>
	<div class="demoTable">
	  搜索:
	  <div class="layui-inline">
	    <input class="layui-input" name="pobName" id="pobName" autocomplete="off" placeholder="输入材料名称">
	  </div>
	  
	  <button class="layui-btn" data-type="reload">搜索</button>
	</div>
	<table class="layui-hide" id="poBreakdown" lay-filter="demo"></table>
<script type="text/javascript" src="../../../res/js/base.js"></script>
<script type="text/javascript" src="../../../res/mln/getUrlParam.js"></script>
<script src="../../../layui/layui.js"></script>
<script>

layui.use(['laydate', 'laypage', 'layer', 'table', 'upload', 'element'], function(){
	  var laydate = layui.laydate //日期
	  ,laypage = layui.laypage //分页
	  layer = layui.layer //弹层
	  ,table = layui.table //表格
	  ,upload = layui.upload //上传
	  ,element = layui.element; //元素操作
	 
	  
	  //监听Tab切换
	  element.on('tab(demo)', function(data){
	    layer.msg('切换了：'+ this.innerHTML);
	    console.log(data);
	  });
	  
	  //执行一个 table 实例
	  table.render({
	     elem: '#poBreakdown'
	    ,url: getRootPath()+'poBreakdown/findAll.action?poId='+getUrlParam('poId') //数据接口
	    ,page: true //开启分页
	    ,method:'post'
	    ,cols: [[ //表头
	       {type:'checkbox', fixed: 'left'}
	      /* ,{field: 'pobId ', title: '明细ID', width:120, fixed: 'left'} 
	      ,{field: 'matId', title: '材料ID', width:120, fixed: 'left'}
	      ,{field: 'poId', title: '订单ID', width:120, fixed: 'left'}*/
	      ,{field: 'pobName', title: '材料名称', width:200}
	      ,{field: 'matPrice', title: '材料单价', width:200}
	      ,{field: 'pobNum', title: '材料重量(g)', width:200}
	      ,{field: 'pobPrice', title: '材料总价', width:200}
	      ,{field: 'pobRemark', title: '材料备注', width:250}
	    ]]
	  	,id: 'testReload'
	  });
	  
	  //监听工具条
	  table.on('tool(demo)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
	    var data = obj.data //获得当前行数据
	    ,layEvent = obj.event; //获得 lay-event 对应的值
	    
	  });
	  //条件查询
	  var $ = layui.$;
	  $('.demoTable .layui-btn').on('click', function(){
		 var pobName = $('#pobName');
		 //执行重载
	     table.reload('testReload', {
	       page: {
	         curr: 1 //重新从第 1 页开始
	       }
	       ,where: {
	    	   pobName: pobName.val()
	       }
	     });
	  });
	});
	  
</script>
</body>
</html>